<template>
  <div class="c-item" @click="visible = true">
    <i class="lib-item__icon iconfont icon-section" />
    <div class="lib-item__title">外框</div>

    <modal-section-picker v-model="visible" @change="handleSectionChange" />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ModalSectionPicker from '@/components/modal-section-picker.vue'

export default {
  name: 'VSection',
  components: { ModalSectionPicker },

  data: () => ({
    visible: false,
  }),
  methods: {
    ...mapMutations(['addComponent']),

    handleSectionChange({ width, height, selected }) {
      // todo
      const guid = this.guid(selected.name)
      const data = {
        name: selected.name,
        guid,
        props: {
          x: 0,
          y: 0,
          width,
          height,
          id: guid,
          frameSize: 10,
        },
        children: [],
      }
      this.addComponent(data)
    },
  },
}
</script>

<style scoped></style>
